<template>
    <div class="banner">
        <el-card class="box-card">
            <div v-if="isLoginPage">
                <div slot="header" class="clearfix header">
                    <span style="padding-buttom:15px">登录</span>
                </div>
                <div>
                    <el-input v-model="id" placeholder="账号"></el-input>
                    <el-input v-model="pwd" placeholder="密码" type="password"></el-input>
                    <a href="javascript:;" @click="isLoginPage=false">没有账号？点击注册</a>
                    <br>
                    <el-button @click="login">登录</el-button>
                    <el-alert title="账号或者密码错误，请重新输入" type="error" style="margin:15px auto" v-if="loginError"></el-alert>
                </div>
            </div>
            <div v-if="!isLoginPage">
                <div slot="header" class="clearfix header">
                    <span>注册</span>
                </div>
                <div>
                    <el-input v-model="id" placeholder="账号"></el-input>
                    <el-input v-model="pwd" placeholder="密码"></el-input>
                    <el-input v-model="pwd" placeholder="再次输入密码"></el-input>
                    <a href="javascript:;" @click="isLoginPage=true">已有账号？点击登录</a>
                    <br>
                    <el-button  style="padding-buttom:15px">注册</el-button>
                    <el-alert title="暂未开放注册" type="error" style="margin:15px auto"></el-alert>
                </div>
            </div>
            
        </el-card>
    </div>
</template>

<script>
import store from '../store'
import axios from 'axios'
export default {
    data(){
        return {
            input:'',
            isLoginPage:true,
            loginError:false,
            id:'tesla',
            pwd:'tesla',
        }
    },
    computed:{
        isLogin(){
        return store.state.isLogin;
    }
  },
  methods:{
      login(){
          let userInfo = null;
          axios.get('/api/user').then((res)=>{
                userInfo = res.data;
              if (userInfo.userId == this.id &&userInfo.userPwd == this.pwd) {
                  store.commit('LOGIN');
                  this.$router.push({path:'/home'});
              }else{
                  this.loginError=true;
                  this.$router.push({path:'/login'});
                  console.log('err');
              }
          })
        //   store.commit('LOGIN');
      }
  }
}
</script>

<style>
.header{
    font-size: 28px;
    border-bottom: 1px solid #ebeef5;
}
.banner {
    margin: 0%;
    padding: 0%;
    height: 100vh;
    background: url("../../static/login_bg.jpg") no-repeat;
    background-size: 100%;
}
.box-card {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 20;
    transform: translate(-50%,-50%);
}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  input{
      margin-top: 24px;
  }
  a{
      text-decoration: none;
      color: #409EFF
  }
</style>
